import { useEffect, useState } from 'react'

import './login.module.scss'
import './login.scss'
import initBg from './init'
import { getMsg, login } from '@/api/login'
import { Button, Col, Form, Input, message, Row, Space } from 'antd'
import { useNavigate } from 'react-router-dom'

const view: React.FC = () => {
  // 组件加载完毕
  useEffect(() => {
    initBg()
    changeMsg()
  }, [])

  const navigato = useNavigate()

  const [img, setImg] = useState('')

  const changeMsg = async () => {
    const res = await getMsg()
    console.log(res)
    // 1. 拿到验证码
    setImg('data:image/gif;base64,' + res.img)
    // 2. 将 uuid 存储到本地
    localStorage.setItem('uid', res.uuid)
  }

  // 成功回调
  const onFinish = async (values: any) => {
    console.log('Success:', values)
    const res = await login({ ...values, uuid: localStorage.getItem('uid') })
    // 1. 提示
    message.success('登录成功！')
    // 2. 存 token
    localStorage.setItem('token', res.token)
    // 3. 跳转
    navigato('/page')
    // 4. 删除 uuid
    localStorage.removeItem('uid')
  }

  // 失败回调
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo)
    message.warning('请输入完整信息')
  }

  return (
    <div className="loginPage">
      {/* 背景 */}
      <canvas id="canvas" style={{ display: 'block' }}></canvas>
      {/* 登录盒子 */}
      <div className="loginBox">
        {/* 标题部分 */}
        <div className="title">
          <h1>React 18&nbsp;·&nbsp;通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        {/* 表单 */}
        <div className="loginbox">
          {/* <Space
              direction="vertical"
              size="large"
              style={{ display: 'flex' }}
            >
              <Input placeholder="用户名" />
              <Input.Password placeholder="密码" />
              <Row gutter={20}>
                <Col span={15}>
                  <Input placeholder="验证码" />
                </Col>
                <Col span={9}>
                  <img
                    onClick={changeMsg}
                    height={45}
                    className="captchaImg"
                    src={img}
                  />
                </Col>
              </Row>
              <Button type="primary" className="loginBtn" block>
                登录
              </Button>
            </Space> */}
          <Form onFinishFailed={onFinishFailed} onFinish={onFinish}>
            <Form.Item
              name="username"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input placeholder="用户名" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Input.Password placeholder="密码" />
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Row gutter={20}>
                <Col span={15}>
                  <Input placeholder="验证码" />
                </Col>
                <Col span={9}>
                  <img
                    onClick={changeMsg}
                    height={45}
                    className="captchaImg"
                    src={img}
                  />
                </Col>
              </Row>
            </Form.Item>
            <Form.Item>
              <Button
                htmlType="submit"
                type="primary"
                block
                className="loginBtn"
              >
                Submit
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}
export default view
